import { useEffect, useRef } from 'react';
// import data from '../data.json';
import './index.less';

const gridCols = () => {
  let data = [];
  for (let i = 0; i < 100; i++) {
    let num = parseInt(Math.random() * (400 - 100 + 1) + 100);
    let num1 = parseInt(Math.random() * (400 - 100 + 1) + 100);
    let num2 = parseInt(Math.random() * (50 - 1 + 1) + 1);
    let newnum = `https://picsum.photos/${num}/${num1}?random=${num2}`;
    data.push(newnum);
  }
  const newData = data.map((url, id) => {
    return {
      id,
      url,
      text: id > 30 ? '阿发发生公司大概啊啊啊啊啊啊啊啊啊啊啊' : 'test111111',
    };
  });
  console.log('newData', newData);
  const imgRef = useRef();
  useEffect(() => {
    const nodeList = document
      .querySelector('#masonry2')
      .querySelectorAll('.item');
    nodeList.forEach(function (img, index) {
      let src = img.getAttribute('url');
      let image = new Image();
      image.src = src;
      let width = img.width;
      image.onload = () => {
        let w = image.width;
        let h = image.height;
        let height = Math.round((h * width) / w);
        img.src = src;
        console.log(img.src);
        img.style.gridRowEnd = `span ${~~(height / 10)}`;
      };
    });
  }, []);
  return (
    <div className="masonry2" id="masonry2">
      {newData?.map((item) => {
        return (
          <img
            ref={imgRef}
            className="item"
            url={item.url}
            height="100%"
            width="100%"
            key={item.id}
          />
        );
      })}
    </div>
  );
};
export default gridCols;
